<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>优惠开单</title>
<meta name="viewport" content="width=100%, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/lib/weix/style/weui.min.css">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/comm.css">
<link rel="stylesheet" href="/css/form_hej.css">
<link rel="stylesheet" href="/css/form_order.css">
</head>

<body>
<div class="weui-cells">
    <a class="weui-cell weui-cell_access" href="javascript:;" id="J_user_ans">
        <div class="weui-cell__hd ts J_user_ts" style="width:45px;"><i class="icon-user"></i></div>
        <div class="weui-cell__bd">
            <p id="J_baoq">选择已报备客户</p>
            <div id="J_user" style="display:none;">
                <p id="J_user_name" style="font-size:14px;"></p>
                <p id="J_user_diz" style=" padding:3px 0; font-size:12px;"></p>
                <p id="J_user_tuj" style="font-size:12px; color:#999"></p>
            </div>
        </div>
        <div class="weui-cell__ft"></div>
    </a>
</div>

<input type="number" id="J_customerId" hidden readonly />
<div class="weui-cells__title">成交订单信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">成交额(元)</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" placeholder="请输入成交额" id="J_totalMoney">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">分成积分</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="请输入一级合伙人所得积分" id="J_points" maxlength="10">
        </div>
    </div>
</div>

<div id="J_img_box"></div>

<div class="weui-cells weui-cells_form" id="uploader">
 <div class="weui-cell">
     <div class="weui-cell__bd">
         <div class="weui-uploader">
             <div class="weui-uploader__hd">
                 <p class="weui-uploader__title">上传凭证</p>
                 <div class="weui-uploader__info"><span id="uploadCount">0</span>/1</div>
             </div>
             <div class="weui-uploader__bd">
                 <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                 <div class="weui-uploader__input-box">
                     <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
                 </div>
             </div>
         </div>
     </div>
 </div>
</div>

<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:;" id="J_submit">确定</a>
</div>

<!--放大图片-->
<div class="weui-gallery" id="gallery">
    <span class="weui-gallery__img" id="galleryImg" style="background-image:url()"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:;" class="weui-gallery__del" id="J_clo_img">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
    </div>
</div>

<!--弹出效果-->
<div class="th-tcc__boxs J_tcc_user">
	<div class="th-tcc__bj J_tcc_user_clo"></div>
    <div class="th-tcc__box th-tcc__box-rig">
		<div class="th-tcc__hd-rig th-xx_bot">选择已报备的业主<a href="javascript:;" class="clo J_tcc_user_clo"><i class="icon-close"></i></a></div>
        <div class="th-tcc__bd-rig">

            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required>
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText">
                        <i class="weui-icon-search"></i>
                        <span>搜索</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>

            <div class="keh_list" id="J_list">

            </div>

            <div class="weui-loadmore" id="J_loadmore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>

        </div>
    </div>
</div>

<script src="/js/zepto.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="/js/comm.js"></script>
<script type="text/javascript">
$(function(){
	//sessionStorage.setItem("need-refresh", true);  //返回上一页刷新

	//-----------------------------------------------------------------------
	//上传图片
	var uploadCount = 0;
	weui.uploader('#uploader', {
	   url: '/upload/uploadFile',
	   auto: true,
	   type: 'file',
	   fileVal: 'photo',
	   compress: {
		   width: 1600,
		   height: 1600,
		   quality: .8
	   },
	   onBeforeQueued: function(files) {
		   // `this` 是轮询到的文件, `files` 是所有文件
		   if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
			   weui.alert('请上传图片');
			   return false; // 阻止文件添加
		   }
		   if(this.size > 10 * 1024 * 1024){
			   weui.alert('请上传不超过10M的图片');
			   return false;
		   }
		   if (files.length > 1) { // 防止一下子选择过多文件
			   weui.alert('最多只能上传1张图片，请重新选择');
			   return false;
		   }
		   if (uploadCount + 1 > 1) {
			   weui.alert('最多只能上传1张图片');
			   return false;
		   }

		   ++uploadCount;
		   
		   $('#uploadCount').html(uploadCount)
		   
			if(uploadCount >= 1){
				$('#uploaderInput').parent().hide()
			}else{
				$('#uploaderInput').parent().show()
			}
		   
		   // return true; // 阻止默认行为，不插入预览图的框架
	   },
	   onQueued: function(){
		   //console.log(this);
		   // console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
		   // console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64

		   // this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
		   // this.stop(); // 中断上传

		   // return true; // 阻止默认行为，不显示预览图的图像
	   },
	   onBeforeSend: function(data, headers){
		   //console.log(this, data, headers);
		   // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
		   // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

		   // return false; // 阻止文件上传
	   },
	   onProgress: function(procent){
		   //console.log(this, procent);
		   // return true; // 阻止默认行为，不使用默认的进度显示
	   },
	   onSuccess: function (ret) {
			if(ret.code == 200){
				//console.log(ret.data.photo);
				//$('#J_img_box').append('<input type="number" class="J_img_itme" data-id="'+ret+'" value="'+ret.data.photo+'" hidden readonly />')
				$('#J_img_box').html('<input class="J_img_itme" value="'+ret.data.photo+'" hidden readonly />')
			}
		   //console.log(this, ret);
		   //return true; // 阻止默认行为，不使用默认的成功态
	   },
	   onError: function(err){
		   //console.log(this, err);
		   // return true; // 阻止默认行为，不使用默认的失败态
	   }
	});

	//删除图片
	var $this_img = [];
	
	$('#uploaderFiles').on("click", "li", function(){
		$this_img = $(this)
		$('#galleryImg').css('background-image','url('+$(this).css("backgroundImage").replace('url(','').replace(')','')+')')
		$('#gallery').addClass('on')
	});
	$('#galleryImg').on("click", function(){
		$('#gallery').removeClass('on')
	});
	$(document).on('click','#J_clo_img',function(){
		$this_img.remove();
		$('#gallery').removeClass('on')
		uploadCount = uploadCount-1
		$('#uploadCount').html(uploadCount)
		$('.J_img_itme').remove() //这里是临时解决方法，一张图片的方式，需要改进
		
		if(uploadCount >= 1){
			$('#uploaderInput').parent().hide()
		}else{
			$('#uploaderInput').parent().show()
		}
		
	})
	//-----------------------------------------------------------------------
	//遍历报备客户
	function getCustomerList(page,rows){
		var uid = "${uid}";
		var data = {page:page,rows:100,uid:uid,returnType:1,isall:1};
		var url = "/customer/select_customer";
		$.ajax({
			type: "POST",
			dataType: 'json',
			async: false,
			contentType: "application/json; charset=utf-8",
			data: JSON.stringify(data),
			url: url,
			success: function(res){
				if(res.code == 200){
					//操作
					var list = res.data.list;
					
					for(var j =0;j<list.length;j++){
						var shtml = '<a href="javascript:" class="keh_data th-xx_top J_userx" data-name="'+list[j]['name']+'" data-pho="'+list[j]['phone']+'" data-diz="'+list[j]['address']+'" data-tuj="'+list[j]['user_name']+'" data-id="'+list[j]['id']+'">'+
											'<p class="na">'+
												'<span class="tb"><i class="icon-user "></i></span>'
							
							if(list[j]['gettime'] == 0){	//有时间则为领券
							shtml +=			'<span class="lq">待领券</span>'
							}else if(list[j]['gettime'] != 0 && list[j]['verification'] == 0){	//verification 0未使用  1已使用
							shtml +=			'<span class="lq">已领券</span>'
							}else if(list[j]['verification'] == 1){	//verification 0未使用  1已使用
							shtml +=			'<span class="lq">已用券</span>'
							}

							shtml +=			'<span class="mz">'+list[j]['name']+'&nbsp;'+list[j]['phone']+'</span>'+
											'</p>'+
											'<p class="dz">'+list[j]['address']+'</p>'+
											'<p class="ms">推荐人：'+list[j]['user_name']+'('+list[j]['addtime']+')</p>'+
										'</a>'
						$("#J_list").append(shtml);
					}

				}else{
					weui.topTips(res.msg);
				}

			},
			error: function(e){

			},
			complete: function(e){
				$('#J_loadmore').hide();
			}
		});

	}
	//-----------------------------------------------------------------------
	//关闭客户弹出
	$(document).on('click','.J_tcc_user_clo',function(){
		$('.J_tcc_user').removeClass('on')
		$('body').removeClass('fix_box')
	})
	//打开客户弹出
	$(document).on('click','#J_user_ans',function(){
		$('#J_loadmore').show();
		getCustomerList(1);
		$('body').addClass('fix_box')
		$('.J_tcc_user').addClass('on')
	})

	//选择客户
	$(document).on('click','.J_userx',function(){
		var $this_t =$(this)
		var name_data = $this_t.attr('data-name')
		var pho_data = $this_t.attr('data-pho')
		var diz_data = $this_t.attr('data-diz')
		var tuj_data = $this_t.attr('data-tuj')
		var id_data = $this_t.attr('data-id')

		$('.J_userx').removeClass('on')
		$this_t.addClass('on')
		$('.J_user_ts').addClass('on')
		$('#J_baoq').hide()
		$('#J_user').show()

		$('#J_user_name').html(name_data+'&nbsp;'+pho_data)
		$('#J_user_diz').html(diz_data)
		$('#J_user_tuj').html('推荐人：'+tuj_data+'')
		$('#J_customerId').val(id_data)

		$('.J_tcc_user').removeClass('on')
		$('body').removeClass('fix_box')
	})

	//弹出的搜索
	weui.searchBar('#searchBar');
	//-----------------------------------------------------------------------
	//提交操作
	$(document).on('click','#J_submit',function(){
		var id_data = $('#J_customerId').val();
		var chj_data = $('#J_totalMoney').val().trim();
		var jif_data = $('#J_points').val().trim();

		if(id_data == ''){
			weui.topTips('请选择已报备客户');
			return false
		}

		if(chj_data == ''){
			weui.topTips('请输入正确的成交金额');
			return false
		}

		if(jif_data == ''){
			weui.topTips('请输入正确的分成积分');
			return false
		}
		
		if($('.J_img_itme').length < 1){
			weui.topTips('请上传图片');
			return false		
		}

		var uid  = "${uid}";
        var data = {
			addby:uid,
            customerId:$("#J_customerId").val(),
            totalMoney:$("#J_totalMoney").val(),
            points:$("#J_points").val(),
            pic:$('.J_img_itme').val()};
						
        var url = "/order/addOrder";
		
		weui.dialog({
			title: '确定开单',
			content: '是否确认开单信息？',
			className: 'custom-classname',
			buttons: [{
				label: '取消',
				type: 'default',
				onClick: function () {}
			}, {
				label: '确定',
				type: 'primary',
				onClick: function () {
					var loading = weui.loading('数据提交中');
					$.ajax({
						type: "POST",
						async: false,
						dataType: 'json',
						contentType: "application/json; charset=utf-8",
						data: JSON.stringify(data),
						url: url,
						success: function(res){
							if(res.code == 200){
								weui.toast('提交成功', {
									duration: 1500,
									className: 'custom-classname',
									callback: function(){
										location.replace('/orderPage/order_list?topen=1')
									}
								});
							}else{
								weui.topTips(res.msg);
							}
						},
						error: function(){
			
						},
						complete: function(){
							loading.hide()
						}
					});
						
				}
			}]
		});
		
		

	})


});
</script>
</body>
</html>
